<template>
    <a-modal :title="$t('Create') + 'OAuth2' + $t('Client')" v-model='isShow' :maskClosable='false' v-dragModal>
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
            labelAlign="left">
            <a-spin :spinning="loading">
                <a-form-model-item :label="$t('Client') + $t('名称') + ':'" prop="name">
                    <a-input default-value="mysite" v-model="form.name" :placeholder="$t('Enter') + $t('Client') + $t('名称')">
                    </a-input>
                </a-form-model-item>
                <a-form-model-item :label="$t('Client') + 'URL' + ':'" prop="client_url">
                    <a-input v-model="form.client_url" :placeholder="$t('Enter') + $t('Client') + 'URL'" />
                </a-form-model-item>
                <a-form-model-item :label="$t('回调') + 'URL' + ':'" prop="redirect_uri">
                    <a-input v-model="form.redirect_uri" :placeholder="$t('Enter') + $t('回调') + 'URL'" />
                </a-form-model-item>
            </a-spin>
        </a-form-model>

        <template slot="footer">
            <a-button @click="handleClose">{{ $t('Cancel') }}</a-button>
            <a-button type='primary' @click="handleCreate">{{ $t('Confirm') }}</a-button>

        </template>

    </a-modal>
</template>

<script>

export default {
    data() {
        return {
            isShow: false,
            labelCol: { span: 5 },
            wrapperCol: { span: 18 },
            form: {
                name: '',
                client_url: '',
                redirect_uri: '',
            },

            rules: {
                name: [
                    { required: true, message: this.$t('Enter') + this.$t('Client') + this.$t('名称'), trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9+&@#/%?=~_|!:,.;]{1,100}$/, message: this.$t('仅支持100 字符以内，仅支持输入大小写字母、数字、特殊字符+&@#/%?=~_|!:,.;'), trigger: 'blur' }
                ],
                client_url: [
                    { required: true, message: this.$t('Enter') + this.$t('Client') + 'URL', trigger: 'blur' },
                    { pattern: '^(https?)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]{0,92}[-A-Za-z0-9+&@#/%=~_|]$', message: this.$t('仅支持输入最多 100 个字符的大小写字母、数字、特殊字符并符合以下正则规范') + '：(https?)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]', trigger: 'blur' }
                ],
                redirect_uri: [
                    { required: true, message: this.$t('Enter') + this.$t('回调') + 'URL', trigger: 'blur' },
                    { pattern: '^(https?)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]{0,92}[-A-Za-z0-9+&@#/%=~_|]$', message: this.$t('仅支持输入最多 100 个字符的大小写字母、数字、特殊字符并符合以下正则规范') + '：(https?)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]', trigger: 'blur' }
                ]
            },
            loading: false,
        };
    },
    methods: {
        handleCreate() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    this.loading = true
                    const { data } = await this.$api.systemSettings.appendCretificationApi(this.form)
                    console.log("data", data)
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag === 0) {
                        this.$emit('get-list')
                        this.handleClose()
                    }
                    this.loading = false
                } else {
                    return false;
                }
            });
        },
        handleClose() {
            this.$refs['ruleForm'].resetFields();
            this.isShow = false
        },
    }
}
</script>